<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 需求:  div>p#one>这是一个p  -->
    <!-- 第二步: 在html中写死一个未来要插入动态创建的元素的节点 -->
    <div id="root"></div>

    <!-- 第一步: 引入react和react-dom. 注意: 先引react后引react-dom. 因为react-dom依赖react -->
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script>
      // 下面写的代码,不是未来工作写的代码.写这个代码是为了让大家理解react是如何工作的
      //   document.createElement 创建的真正的dom对象
      //   React.createElement('标签名', {id: 'xxx'}, 子节点,子节点,子节点,....) //创建出来的是虚拟dom/react元素
      const p = React.createElement(
        'p',
        { id: 'one' },
        '这是一个p',
        'xxx',
        'yyy'
      )

      const div = React.createElement('div', {}, p)
      //   console.log(p)
      //   console.log(document.createElement('p'))

      // ReactDOM.render的作用:
      //   1. 首先根据div以及他下面的子节点这些虚拟dom,自动帮我们创建真实的dom对象
      // 2. 当真实dom创建完毕之后,会自动帮我们插入到真实dom树上
      ReactDOM.render(div, document.getElementById('root'))
    </script>
  </body>
</html>
